<!-- 记事本 -->
<template>
  <div id="app">
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>记事本</h1>
        <input
          v-model="inputValue"
          @keyup.enter="add"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
        <!-- autofocus="autofocus": 当在输入框中按下并释放回车键(Enter)时会触发Vue实例中的add方法-->
        <!-- autofocus="autofocus": 页面加载时自动聚焦到这个输入框-->
        <!--autocomplete="off":防止浏览器显示之前保存的输入历史记录-->
      </header>
      <!-- 列表区域 -->
      <section class="main" v-if="list.length">
        <transition-group name="fade" tag="ul" class="todo-list">
          <li
            class="todo"
            v-for="(item,index) in list"
            :key="item.id"
            :class="{completed:item.done}"
          >
            <input
              type="checkbox"
              v-model="item.done"
              class="toggle"
            />
            <span class="index">{{index+1}}.</span>
            <label>{{item.content}}</label>
            <button class="destroy" @click="remove(index)">X</button>
          </li>
        </transition-group>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer" v-if="list.length">
        <span class="todo-count">
          <strong> {{unfinishedCount}}</strong>项未完成
        </span>
        <button  class="clear-completed" @click="clear">
          清空全部
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class ='info'>
      <p>
        <a href="" target="_blank">
          <button  class="blog-button">博客</button>
        </a>
      </p>
    </footer>
  </div>



</template>

<script>
export default {
  name:'TodoApp',
  data(){
    return{
      list: [],
      inputValue: ""
    }
  },
  computed:{
    // 计算未完成任务数量
    unfinishedCount(){
      return this.list.filter(item=>!item.done).length
    }
  },
  mounted() {
    // 页面加载时读取本地存储
    const saved = localStorage.getItem('todo-list');
    if (saved) {
      this.list = JSON.parse(saved);
    }
  },
  watch:{
    // 监听列表变化并保存
    list: {
      handler(newVal) {
        localStorage.setItem('todo-list', JSON.stringify(newVal));
      },
      deep: true
    }
  },
  methods:{
    add(){
      const content = this.inputValue.trim()
      if(content){
        this.list.push({
          id:Date.now(),
          content,
          done:false
        })
        this.inputValue=''
      }
    },
    remove(index){
      if(confirm('确定删除这项任务吗？'))
        this.list.splice(index,1)
    },
    clear(){
      if(confirm('确定清空所有任务吗？'))
        this.list=[]
    }
  }
}
</script>

<style>
#app {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  color: #2c3e50;
}
.header{
  text-align: center;
  margin-bottom: 20px;
}
.header h1{
  font-size: 36px;
  color: #42b983;
  margin-bottom: 10px;
}
.new-todo{
  width:100%;
  padding:10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.todo-list{
  list-style: none;
  padding:0;
  margin:0;
}
.todo{
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #eaeaea;
  transition: background 0.3s;
}
.todo:hover{
  background: #f9f9f9;
}
.todo.completed label{
  text-decoration: line-through;
  color: #999;
}
.todo.input[type='checkbox']{
  margin-right: 10px;
  transform: scale(1.3);
}
.index{
  margin-right: 10px;
  justify-content: space-between;
  color:#888
}
.destroy{
  margin-left: auto;
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.destroy:hover{
  background: #ff3b3b;
}
.footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 16px;
}
.clear-completed{
  background: #42b983;
  color: white;
  border:none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.clear-completed:hover{
  background: #369a6e;
}
.info {
  text-align: center;
  margin-top: 40px;
  color: #999;
}
.blog-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 6px 14px;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.blog-button:hover {
  background: #2980b9;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.fade-leave-active {
  position: absolute;
  width: 100%;
}
.fade-move {
  transition: transform 0.5s ease;
}
</style>
